import React, { Component } from "react";

import { increment, decrement, addOdd, addAsync } from "../../store/actions/count";

export default class Count extends Component {
  state = {
    step: 1
  }
  changeStep = (e) => {
    this.setState({ step: Number(e.target.value) })
  }
  jia = () => {
    const { store } = this.props
    store.dispatch(increment(this.state.step))
  }
  jian = () => {
    const { store } = this.props
    store.dispatch(decrement(this.state.step))
  }
  jiaOdd = () => {
    const { store } = this.props
    store.dispatch(addOdd(this.state.step))
  }
  jiaAsync = () => {
    const { store } = this.props
    store.dispatch(addAsync(this.state.step))
  }
  render() {
    const { store } = this.props
    const { count, persion } = store.getState()
    // console.log('store.getState()', store.getState())
    return (
      <div>
        <h2>我是Count组件</h2>
        <div>count：{count}</div>
        <div>persion员工的数量:{persion && persion.length}</div>
        <div className="action-wrap">
          <select name="" id="" value={this.state.step} onChange={this.changeStep}>
            <option value={1}>1</option>
            <option value={2}>2</option>
            <option value={3}>3</option>
          </select>
          <button onClick={this.jia}>+</button>
          <button onClick={this.jian}>-</button>
          <button onClick={this.jiaOdd}>奇数+</button>
          <button onClick={this.jiaAsync}>异步+</button>
        </div>
      </div>
    )
  }
}